<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../../../2. W2104A/lib/bootstrap@3.3.4/css/bootstrap.min.css">
</head>
<body>
    <div id="box">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>id</td>
                    <td>名称</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>总价</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in arr_list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="add(index,item.num)">+</button>
                        <input type="text" v-model="item.num">
                        <button @click = "jian(index,item.num)">-</button>
                    </td>
                    <td>{{item.sum_item}}</td>
                </tr>
            </tbody>
        </table>
        <h1>sum:{{sum}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#box',
            data:{
                arr_list:[
                    {
                        id:'01',
                        name:'T恤',
                        price:9.9,
                        num:0,
                        sum_item:0
                    },
                    {
                        id:'02',
                        name:'裤子',
                        price:90,
                        num:0,
                        sum_item:0
                    },
                    {
                        id:'03',
                        name:'鞋子',
                        price:999,
                        num:0,
                        sum_item:0
                    }
                ]
            },
            methods: {
                add(index,num){
                    // item.num + 1 点击一下数量加1
                    console.log(index,num);
                    if(num<0){
                        // -5  
                        // num = 0;
                        this.arr_list[index].num = 0;
                    }else{
                        this.arr_list[index].num = num*1 + 1;
                        this.sumItem(index);
                    }
                },
                jian(index,num){
                    // 
                    if(num<=0){
                        this.arr_list[index].num = 0;
                    }else{
                        this.arr_list[index].num = num*1 - 1;
                        this.sumItem(index);
                    }

                },
                sumItem(index){
                    this.arr_list[index].sum_item = this.arr_list[index].num * this.arr_list[index].price;
                }
            },
            computed:{
                sum(){
                    let result = 0;
                    this.arr_list.forEach(element => {
                        result += element.sum_item;
                    });
                    return result;
                }
            }
        })
        console.log(vm);
        // 数据驱动视图
    </script>
</body>
</html>